<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>04_样式类名操作</title>
		<!-- 样式类名操作：针对css3，添加，移除，切换的元素"类名"操作 
		addClass()          有参：1个参和多个参
		                    语法：addClass("类名")
							<p class="类名">
							语法：addClass("类名1  类名2");
							<p class="类名1 类名2">
							功能：匹配元素集合中的所有元素
							     添加一个或者多个类名操作
							理解：元素添加存在的样式
		removeClass()       功能：匹配元素集合中的所有元素
		                          移除一个或者多个类名操作
		toggleClass()        功能：如果元素有类名移除，没有则添加
		hasClass()          功能：检查匹配元素集合中是否包含指定类名
		                     返回值bool
		-->
		<!-- 要求:3.css:  .bgColor{  300*300  背景色}
							.broders{10个像素实现红色边框  倒角画圆}		   
									 -->
	<script src="../js/jquery-1.11.1.js"></script>
	<style>
		.bgColor{
			width: 300px;
			height: 300px;
			background: #f00;
		}
		.borders{
			border: 10px solid #ff0;
			border-radius: 50%;
		}
	</style>
	</head>
	<body>								 
	<div id="targetElement"></div>
	<button id="addClassBtn">添加类名</button>
	<button id="removeClassBtn">移除类名</button>
	<button id="toggleClassBtn">切换类名</button>
	<button id="hasClassBtn">检查类名是否存在</button>
	<div id="resultArea"></div>
	<script>
		//1.点击   添加类名  按钮  添加效果【样式】 300*300  背景色红色
		$("#addClassBtn").click(function(){
			//div添加样式
			$("#targetElement").addClass("bgColor").addClass("borders");
			$("#resultArea").html("<h4>添加样式类名：bgColor</h4>");
		});
		//2.点击  添加类名  按钮  添加效果【样式】
		//   300*300  背景色红色  圆  外层  10px黄色框
		//3.点击  移除类名  按钮  添加效果【样式】 300*300  背景色红色
		$("#removeClassBtn").click(function(){
			$("#targetElement").removeClass("borders")
			$("#resultArea").html("<h4>移除样式类名：bgColor</h4>")
		});
		//4.  点击  切换类名  按钮  添加效果【样式】
		//300*300 背景色红色  圆  外层   10px黄色框
		$("#toggleClassBtn").click(function(){
			//div添加样式--存在样式：类名
			$("#targetElement").toggleClass("borders")
			$("#resultArea").html("<h4>添加样式类名：bgColor</h4>")
		});
		//5.点击   切换类名  按钮  添加效果【样式】
		//去掉  300-300 背景色红色
		$("#toggleClassBtn").click(function(){
			//div添加样式--存在样式：类名
			$("#targetElement").toggleClass("bgColor")
			$("#resultArea").html("<h4>添加样式类名：borders</h4>")
		});
		//6.检查类名是否存在：ture存在    false不存在
		$("#hasClassBtn").click(function(){
			//div添加样式--存在样式：类名
			var hc=$("#targetElement").hasClass("bgColors")
			$("#resultArea").text("检查当前样式是否存在"+hc);
		});
	</script>
	</body>
</html>